<template>
  <el-dialog v-model="dialogVisible" :append-to-body="true" :close-on-click-modal="false"
             style="background-color: #ffffff; box-sizing: border-box" title="活动详情" @close="onClose">
    <!-- 自定义标题 -->
    <template #title>
      <div class="custom-title">
        <span style="color: #e64a4a; font-size: 18px; font-weight: bold;">活动详情</span>
      </div>
    </template>
    <!-- 主体内容 -->
    <div class="activity-detail-container flex justify-content-space-between">
      <div class="left_content flex-auto " style="margin-right: 10px">
        <div class="detail-title">学习贯彻党的二十大精神专题研讨会</div>
        <div class="detail-sub-title">主题党日活动</div>
        <div class="detail-info">
          <div class="flex align-center" style="margin-top: 10px">
            <img alt="" src="" style="display: block;width: 25px;height: 25px;margin-right: 10px">
            <div>
              <div style="color: #333333;font-weight: bolder">2025年11月15日 14:00 - 17:00</div>
              <div style="font-size: 12px">星期三下午</div>
            </div>
          </div>
          <div class="flex align-center" style="margin-top: 10px">
            <img alt="" src="" style="display: block;width: 25px;height: 25px;margin-right: 10px">
            <div>
              <div style="color: #333333;font-weight: bolder">市委党校3号楼201会议室</div>
              <div style="font-size: 12px">北京市海淀区大有庄100号</div>
            </div>
          </div>
          <!-- 活动内容开始 -->
          <div style="margin-top: 30px">
            <div class="active-title">活动内容</div>
            <div class="active-content">
              本次专题研讨会旨在深入学习贯彻医院党建工作精神，全面提升医疗服务质量和医德医风建设，切实推进”健康中国“战略落地实施。
              会议将围绕医院党建与医疗服务质量提升、医务人员医德医风建设、优质医疗服务体系建设等主题展开深入讨论，推动医院高质量发展，为人民群众提供更好的医疗服务。
            </div>
          </div>
          <!-- 活动内容结束 -->
          <!-- 相关文档开始 -->
          <div class="file-content">
            <div class="file-title">相关文档</div>
            <div v-for="(item,index) in fileList" :key="index"
                 class="file-item flex justify-content-space-between align-center">
              <img alt="" class="border" src="" style="width: 40px;height: 40px;display: block">
              <div class="flex-auto" style="text-align: left;margin:0 20px">
                <div style="color: black;font-weight: bolder">{{ item.name }}</div>
                <div>{{ item.size }}</div>
              </div>
              <img alt="" class="border" src="" style="width: 40px;height: 40px;display: block">
            </div>
          </div>
          <!-- 相关文档结束 -->
        </div>
      </div>
      <div class="right_content flex-auto " style="margin-left: 10px">
        <div class="statistics-container">
          <div class="statistics-title">活动人员统计</div>
          <div class="leader-card">
            <div class="card-title">活动负责人</div>
            <div class="flex-auto flex align-center justify-content-space-between">
              <div class="nameSlice flex align-center justify-content-center ">张</div>
              <div class="leader-name flex-auto">
                <div class="name">张建国</div>
                <div class="position">党支部书记</div>
              </div>
              <div class="icon flex">
                <img alt="" class="border" src="" style="display: block; width: 30px;height: 30px;margin-right: 10px">
                <img alt="" class="border" src="" style="display: block;width: 30px;height: 30px">
              </div>
            </div>
          </div>
          <div class="person-card flex justify-content-space-between">
            <div class="total-person-box flex-auto" style="margin-right: 10px;">
              <div>计划参与总人数</div>
              <div style="font-weight: bolder;font-size: 24px;color: black">48人</div>
            </div>

            <div class="total-person-box flex-auto" style="margin-left: 10px;">
              <div>请假</div>
              <div style="font-weight: bolder;font-size: 24px;color: black">3人</div>
            </div>

          </div>
          <div class="sign-card">
            <!-- 进度条组件,color 是调整进度条的颜色-->
            <el-progress :percentage="progressPercent" color="#ff0000" stroke-width="8">
              <!-- 自定义内容插槽，用于放置百分比等文字 -->
              <template #default>
                <div class="progress-text" style="top: -25px;left: 0px">
                  <div class="percent-text" style="color: #999999;">签到率</div>
                  <div class="sign-info" style="color: #ff0000;font-weight: bold;font-size: 16px">93.3%</div>
                </div>
                <div class="progress-text" style="bottom: -25px;left: 0px">
                  <div class="percent-text" style="color: #999999;">已签到</div>
                  <div class="sign-info">45/48</div>
                </div>

              </template>
            </el-progress>
          </div>
          <div class="participants-container" style="margin-top: 20px">
          <div class="flex align-center">
              <div class="statistics-title" style="width: 180px">参与人员</div>
              <el-input v-model="input2" :prefix-icon="Search" style="height: 40px" placeholder="搜索姓名"/>
          </div>
            <div style="margin-top: 10px;height: 200px;overflow-y: auto" class="flex flex-wrap">
                <div style="width: 25%;margin-bottom: 10px;color: black" v-for="(item,index) in nameList" :key="index">{{item}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer flex justify-content-space-between align-center">
         <div>活动状态 : 已结束</div>
         <div>
           <el-button type="danger" @click="handleEdit">编辑活动</el-button>
           <el-button type="primary" @click="handleSignManage">签到管理</el-button>
         </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {ref, computed} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';
import {Calendar, LocationFilled, Document, Download, Edit, Delete, Search} from '@element-plus/icons-vue';
// 接收父组件传递的 visible 开关
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  activity: {
    type: Object,
    required: true
  }
});

const fileList = ref([
  {
    name: '党的二十大精神学习材料.pdf',
    size: '2.5MB',
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    name: '研讨会发言提纲.pdf',
    size: '2.5MB',
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    name: '党的二十大精神学习材料.pdf',
    size: '2.5MB',
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
  {
    name: '研讨会发言提纲.pdf',
    size: '2.5MB',
    url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  },
])

const nameList = ['王卫东', '赵明', '郑国强', '张晓峰', '程志远', '谢婷婷', '董华', '萧垦敏', '李红梅', '周建华', '孙丽华', '徐海燕', '陈志强', '黄伟', '马建军', '韩雪', '曹梅', '潘建国', '梁红', '许婷', '魏巍', '邓超', '范海峰', '刘芳', '吴晓丽', '林小燕', '朱明亮', '江涛', '冯小刚', '唐军', '金明'];

// 模拟数据，可根据实际情况从接口获取
const progressPercent = ref(93.3); // 进度百分比
const signedCount = ref(45); // 已签到数量
const totalCount = ref(48); // 总次数

// 发送事件给父组件
const emit = defineEmits(['update:modelValue', 'edit', 'sign-manage']);

// 弹窗可见性
const dialogVisible = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

// 搜索关键词
const searchKeyword = ref('');


</script>

<style lang="scss" scoped>
.custom-title {
  color: #e64a4a;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 10px;
  border-bottom: 2px solid #E8E9ED;
}

.activity-detail-container {
  padding: 20px;

  .left_content {
    .detail-title {
      font-size: 26px;
      font-weight: 600;
      color: #333333;
      font-family: "JetBrains Mono Medium";
    }

    .detail-sub-title {
      color: #f60612;
      background-color: #FDE8E9;
      width: fit-content;
      padding: 4px 5px;
      border-radius: 4px;
      font-size: 12px;
      margin: 20px 0;
    }

    .active-title {
      border-left: 3px solid rgb(255, 0, 0);
      font-size: 16px;
      color: black;
      font-weight: bolder;
      padding: 0 10px;
    }

    .active-content {
      margin-top: 10px;
      font-size: 14px;
      padding: 0 10px;
    }

    .file-content {
      margin-top: 20px;

      .file-title {
        font-size: 16px;
        color: black;
        font-weight: bolder;
        margin-bottom: 10px;
      }

      .file-item {
        border: 1px solid #E8EAED;
        padding: 10px 10px;
        border-radius: 5px;
        margin-top: 10px;
      }
    }
  }

  .right_content {
    .statistics-container {
      background-color: #f3f4f5;
      padding: 20px;
      box-sizing: border-box;

      .statistics-title {
        border-left: 3px solid rgb(255, 0, 0);
        font-size: 18px;
        color: black;
        font-weight: bolder;
        padding: 0 10px;
      }

      .leader-card {
        padding: 20px;
        background-color: #FFFFFF;
        border-radius: 5px;
        margin-top: 20px;

        .card-title {
          font-size: 18px;
          color: black;
          font-weight: bolder;
          padding-bottom: 10px;
        }

        .nameSlice {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background-color: #F3F4F6;
          font-weight: bolder;
          color: #ED2D35;
          margin-right: 10px;
        }

        .name {
          font-size: 14px;
          color: black;
          font-weight: bolder;
        }

        .position {
          font-size: 13px;
        }
      }

      .person-card {
        margin-top: 20px;

        .total-person-box {
          background-color: #FFFFFF;
          padding: 20px;
          border-radius: 5px;
        }

        .total-person-box {
          background-color: #FFFFFF;
          border-radius: 5px;
        }
      }

      .sign-card {
        margin-top: 20px;
        position: relative;
        background-color: #FFFFFF;
        padding: 40px 20px;
        border-radius: 5px;
        /* 自定义文字容器样式 */
        .progress-text {
          position: absolute;
          color: #333;
          display: flex;
          justify-content: space-between;
          width: 100%;
        }

        /* 百分比文字样式，设置为红色 */
        .percent-text {
          //color: #ff0000;
          //font-weight: bold;
          font-size: 14px;
          text-align: end;
        }

        :deep(.el-progress) {
          display: block;
        }

        /* 签到信息文字样式 */
        .sign-info {
          font-size: 12px;
        }


      }
    }
  }
}


.dialog-footer {
  text-align: right;
}
</style>
